<template >

    <div class="container">
        <div class="bg"></div>


        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <!-- 角标 -->
            <i @click="changeLoginType" :class="['jiaobiao', 'iconfont', jiaobiaoType]"></i>
            <!-- 正常登入 -->
            <Common v-if="loginType === 'common'" ref="commonlogin" @syncLoginForm="handleSyncLoginForm"
                @submit="submit" @changeSmsType="changeSmsType" />
            <!-- 短信登入 -->
            <sms v-else-if="loginType === 'sms'" :storeageUserInfo="storeageUserInfo" />
            <!-- 二维码登入 -->
            <qr v-else-if="loginType === 'qr'" :storeageUserInfo="storeageUserInfo" @changeSmsType="changeSmsType" />
        </el-form>

    </div>

</template>
<script>
import Common from "../../components/login/common.vue"
import qr from '../../components/login/qr.vue'
import sms from '../../components/login/sms.vue'
import * as api from '../../api/login'
import storage from '../../utils/storage'
//校验验证码
var vaildateCaptcha = (rule, value, callback) => {
    if (value) {
        callback()
    } else {
        callback('验证码输入错误')
    }
};
//校验用户名
var vaildateUsername = (rule, value, callback) => {
    //3-16正则
    var userNamePattern = /^[a-zA-Z0-9_-]{3,16}$/;
    //如果校验通过直接回调callback，不通过 callback中传参
    if (userNamePattern.test(value)) {
        callback()
    } else {
        callback('用户名输入错误')
    }
};
//校验密码
var vaildatePassword = (rule, value, callback) => {
    //3-16正则
    var userNamePattern = /^[a-zA-Z0-9_-]{3,16}$/;
    //如果校验通过直接回调callback，不通过 callback中传参
    if (userNamePattern.test(value)) {
        callback()
    } else {
        callback('密码输入错误')
    }
};
export default {
    components: { Common, qr, sms },
    data() {
        return {
            //common常规 qr二维码 sms短信登入
            loginType: "common",//登入方式
            ruleForm: {
                username: '',
                password: '',
                captcha: ''
            },
            rules: {
                username: [
                    { validator: vaildateUsername, trigger: 'blur' }
                ],
                password: [
                    { validator: vaildatePassword, trigger: 'blur' }
                ],
                captcha: [
                    { validator: vaildateCaptcha, trigger: 'blur' }
                ]
            }
        };
    },
    //计算属性
    computed: {
        jiaobiaoType() {
            if (this.loginType === 'common') {
                return 'icon-erweimajiaobiao'
            }
            if (this.loginType === 'qr' || this.loginType === 'sms') {
                return 'icon-diannaojiaobiao'
            }
        }
    },
    methods: {
        //点击提交按钮
        submit() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    //本地校验通过
                    //1.获取验证码
                    //2.进行本地校验
                    //3.本地校验通过=>先校验验证码
                    //4.验证码通过再校验用户名和密码
                    //5.成功和失败
                    api.verifyCaptcha(this.ruleForm.captcha)
                        .then(async res => {
                            if (res.data.state) {
                                //验证码通过，校验用户名和密码
                                let { username, password } = this.ruleForm
                                let res = await api.loginApi(username, password)
                                console.log(res);
                                //登入成功
                                if (res.data.state) {
                                    //存用户信息
                                    this.storeageUserInfo(res.data)
                                    //存token
                                    this.$router.push('/')
                                }
                            } else {
                                //验证码不通过，刷新
                                this.$refs['commonlogin'].getCaptcha()
                            }
                        })

                } else {
                    //本地校验失败
                    console.log('error submit!!');
                    return false;
                }
            });
            // console.log('123');
        },

        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        //子传父 自定义事件事件处理函数
        handleSyncLoginForm(newLoginForm) {
            // console.log(newLoginForm);
            this.ruleForm = newLoginForm
        },

        //封装一个方法，用于存储用户信息和token
        storeageUserInfo({ userInfo, token, permission }) {
            //将信息存到vuex
            this.$store.commit('users/SET_USERINFO', userInfo)
            storage.set('userInfo', userInfo)
            storage.set('qf-token', token)
            storage.set('permission', permission)
        },
        //更改登入方法
        changeLoginType() {
            console.log('1');
            if (this.loginType === 'common') {
                this.loginType = 'qr'
            } else if (this.loginType === 'qr') {
                this.loginType = 'common'
            } else if (this.loginType == 'sms') {
                this.loginType = 'common'
            }
        },
        //短信登入方法
        changeSmsType() {
            this.loginType = 'sms'
        }

    }
}
</script>
<style lang="less" scoped>
html,
body,
#app,
.container {
    height: 100%;
}

.jiaobiao {
    font-size: 60px;
    color: #fff;
    cursor: pointer;
    opacity: 0.7;
    position: absolute;
    left: 538px;
    top: 101px;
    z-index: 999
}

.bg {
    background-image: url('./莹.jpg');
    background-repeat: no-repeat;
    height: 100%;
    background-size: 100%;

    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

// !important 深度选择器 /deep/
// .box {
//     width: 400px;
//     height: 500px;
//     background-color: rgba(0, 0, 0, 0.3);
//     position: fixed;
//     top: 100px;
//     left: 200px;
//     overflow: hidden;
// }

// .el-input {
//     /deep/ .el-input__inner {
//         width: 200px;
//     }
// }

// .h1 {
//     color: aliceblue;
//     margin: 60px 0 40px 100px;
// }

// .th {
//     color: aliceblue;
//     margin-left: 150px;
// }

// .bt1 {
//     width: 200px;
// }

// .el-form-item {
//     /deep/ .el-form-item__label {
//         color: aliceblue;
//     }
// }

// // box2
// .box2 {
//     width: 400px;
//     height: 500px;
//     background-color: rgba(0, 0, 0, 0.3);
//     position: fixed;
//     top: 100px;
//     left: 200px;
//     overflow: hidden;
// }

// .h11 {
//     color: aliceblue;
//     margin: 60px 0 40px 130px;
// }

// .bt11 {
//     width: 200px;
// }

// .ipt {
//     /deep/ .el-input__inner {
//         width: 120px;
//         border-radius: 4px 0 0 4px;
//         box-sizing: none;
//         transition: none;
//         box-shadow: none
//     }
// }

// .el {

//     .el-input {
//         width: 100px;
//     }

//     .div {
//         background-color: #fff;
//         height: 40px;
//         width: 80px;
//         border-radius: 0 4px 4px 0;
//         display: flex;
//         justify-content: center;
//         align-items: center;
//         cursor: pointer;
//         position: relative;
//         left: 120px;
//         bottom: 40px;
//     }

//     /deep/ .el-input__wrapper {
//         border-radius: 4px 0 0 4px;
//         transition: none;
//         box-shadow: none
//     }
// }

// //微信扫码
// .sao {
//     border: 1px solid;
//     width: 200px;
//     height: 200px;
//     margin: 20px 0 20px 100px;
// }
</style>